<!-- // 插班补课 -->
<template>
  <el-drawer
    v-model="open"
    title="插班补课"
    :with-header="true"
    size="90%"
    class="join-class-drawer"
    :close-on-click-modal="false"
    :before-close="closeW"
  >
    <div class="content">
      <el-form label-width="auto" :model="form" ref="joinRef">
        <el-form-item
          label="上课班级"
          prop="classId"
          :rules="[
            {
              required: true,
              message: '请选择班级',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            style="width: 320px"
            v-model="form.classId"
            placeholder="班级"
            clearable
            @change="changeClass"
          >
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.beOver === '0' ? item.name + '(已结业)' : item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="补课课次"
          prop="selectCourseName"
          :rules="[
            {
              required: true,
              message: '请选择补课课次',
              trigger: 'change',
            },
          ]"
        >
          <el-input
            ref="inputRef"
            v-show="form.selectCourseName"
            v-model="form.selectCourseName"
            style="width: 320px"
            disabled
            clearable
          />
          <el-button
            v-show="!form.selectCourseName"
            type="primary"
            @click="handleSelect"
            >选择</el-button
          >
          <el-button
            v-show="form.selectCourseName"
            link
            type="primary"
            @click="cancelSelect"
            >清空选择</el-button
          >
        </el-form-item>
      </el-form>
      <CourseTimeSelector
        ref="cSelector"
        :classId="form.classId"
        :studentId="$props.item.studentId"
        @refreshPage="setData"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeW">取消</el-button>
        <el-button type="primary" @click="handleSubmit()"> 提交 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import CourseTimeSelector from "./courseTimeSelector.vue";
import { getClassListAPI, addTempMemberAPI } from "@/api/registrar/class";
import { ElMessage } from "element-plus";
import { onMounted, toRef } from "vue";
const props = defineProps({
  item: {
    type: Object,
    default: {},
  },
});

watch(
  () => props.item,
  (newValue) => {
    props.item = newValue;
    getClassList();
  }
);

const { proxy } = getCurrentInstance();
const emits = defineEmits(["refreshPage"]);
const loading = ref(false);
const open = ref(false);
const classList = ref([]);
const cSelector = ref(null);
const selectCourse = ref({});

const data = reactive({
  form: {
    classId: null,
    selectCourseName: null,
  },
});

const { form } = toRefs(data);

// 事件-----------------------------------------------------------------------------------------
function changeClass(value) {
  form.value.selectCourseName = null;
  selectCourse.value = {};
  form.value.classId = value;
}

function handleSelect() {
  if (form.value.classId) {
    cSelector.value.openSelector();
  } else {
    ElMessage({
      message: "请选择班级",
      type: "warning",
    });
  }
}

function cancelSelect() {
  form.value.selectCourseName = null;
  selectCourse.value = {};
}

function closeW() {
  form.value.classId = null;
  form.value.selectCourseName = null;
  selectCourse.value = {};
  proxy.resetForm("joinRef");
  open.value = false;
}

function handleSubmit() {
  proxy.$refs["joinRef"].validate((valid) => {
    if (valid) {
      addTempMember();
    } else {
      proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
    }
  });
}

function setData(row) {
  const time = row.weekNum
    ? row.classDate.slice(0, 10) +
      "(周" +
      {
        1: "一",
        2: "二",
        3: "三",
        4: "四",
        5: "五",
        6: "六",
        7: "日",
      }[row.weekNum] +
      ")" +
      "  " +
      row.classStartTime +
      "~" +
      row.classEndTime
    : row.classDate.slice(0, 10) +
      "  " +
      row.classStartTime +
      "~" +
      row.classEndTime;
  form.value.selectCourseName = row.courseNameC + "(" + time + ")";
  proxy.$refs.inputRef.$emit("change", form.value.selectCourseName);
  selectCourse.value = row;
}

// 方法------------------------------------------------------------------------------------------

function addTempMember() {
  loading.value = true;
  addTempMemberAPI({
    ids: [{ id: props.item.studentId, courseId: props.item.courseId }],
    cofId: selectCourse.value.cofId,
    orderNo: selectCourse.value.orderNo,
    tempOrderNo: props.item.orderNo,
    classDates: selectCourse.value.classDate,
    temp: 2, // 0临时学员1正常学员 2补课学员
  }).then((response) => {
    //classList.value = response.rows;
    proxy.$modal.msgSuccess("操作成功");
    loading.value = false;
    closeW();
    refreshParent();
  });
}
// 班级
function getClassList() {
  loading.value = true;
  getClassListAPI({
    pageSize: 9999,
    pageNum: 1,
    beOver: "1",
    courseId: props.item.courseId,
  }).then((response) => {
    classList.value = response.rows;
    loading.value = false;
  });
}

const openW = () => {
  // getClassList();
  open.value = true;
};

function refreshParent() {
  emits("refreshPage");
}

defineExpose({ openW }); // 用于父组件调用
</script>

<style lang="scss" scoped></style>
